<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="文案素材"
            :hasBack="true"
            :hasHome="true"
        ></common-header>
        <!-- 共用头部组件 -->

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="true"
            :data="wordList"
            @pullup="loadMore"
        >

            <div
                class="word-empty-tips"
                v-if="wordList.length == 0"
            >{{emptyTips}}</div>

            <div class="word-list">
                <div
                    class="word-item"
                    v-for="(item,index) of wordList"
                    :key="index"
                >
                    <div class="word-info">{{item.content}}</div>
                    <button
                        class="copy-btn"
                        :data-clipboard-text="item.content"
                    >一键复制</button>
                </div>
            </div>

        </common-scroll>
        <!-- 共用页面滚动组件 -->
    </div>
</template>

<script>
var clipboard
import CommonHeader from '@/components/Header'
import CommonScroll from '@/components/Scroll'
import Clipboard from 'clipboard'
export default {
    name: 'WordSource',
    components: {
        CommonHeader,
        CommonScroll
    },
    data() {
        return {
            scrollStyle: {
                top: '1.11rem',
                left: '0',
                right: '0',
                bottom: '0'
            },
            wordList: [],
            emptyTips: '正在全力加载中...',
            nowPage: 1,
            totalPage: 1,
            isLoading: false
        }
    },
    mounted() {
        this.getWordList()
        this.$nextTick(() => {
            if (clipboard) {
                clipboard.destroy()
            }
            clipboard = new Clipboard('.copy-btn')
            clipboard.on('success', e => {
                this.commonDialog.alert('提示', '文案复制成功')
            })
        })
    },
    methods: {
        getWordList() {
            this.isLoading = true
            let postData = this.qs.stringify({
                cat_id: this.$route.query.wordType,
                page_size: 10,
                page: this.nowPage
            })
            this.axios.post('/api/fodder/list.json', postData).then(res => {
                const data = res.data
                if (data.status == 1) {
                    if (data.data.list.length == 0) {
                        this.emptyTips = '暂无数据'
                        return
                    }
                    this.wordList = this.wordList.concat(data.data.list)
                    this.totalPage = Math.ceil(data.data.page_info.total / 10)
                    this.nowPage++
                    this.isLoading = false
                } else {
                    this.commonDialog.alert('提示', data.msg)
                }
            })
        },
        loadMore() {
            if (this.totalPage >= this.nowPage && this.isLoading == false) {
                this.getWordList()
            }
        }
    }
}
</script>

<style lang="stylus" scoped>
.word-empty-tips
    height 2rem
    line-height 2rem
    text-align center
    font-size 0.33rem
    color #999
.word-list
    padding 0.21rem 0.42rem
    .word-item
        position relative
        padding 0.27rem
        background #fff
        border-radius 5px
        margin-bottom 0.18rem
        .word-info
            padding-bottom 0.74rem
            font-size 0.29rem
            color #999
            line-height 1.5
        .copy-btn
            position absolute
            bottom 0.27rem
            right 0.27rem
            width 1.8rem
            line-height 0.6rem
            text-align center
            border-radius 2px
            background #999
            font-size 0.29rem
            color #fff
</style>
